<template>
  <view class="container">
    <!-- 系统导航栏 -->
    <view class="status-bar"></view>
    
    <!-- 搜索栏 -->
    <HeaderBar 
      :location="currentLocation"
      :cartCount="cartCount"
      @location-click="handleLocationClick"
      @search-confirm="handleSearch"
      @cart-click="handleCartClick"
    />
    
    <!-- 预留图片位置 -->
    <view class="reserved-image">
      <image src="/static/reserved.jpg" mode="aspectFill"></image>
    </view>
    
    <!-- 分类导航轮播 -->
    <CategorySwiper 
      :categoryList="categoryList"
      @category-click="handleCategoryClick"
    />
    
    <!-- 活动专场轮播 -->
    <ActivitySwiper 
      :activityList="activityList"
      @item-click="handleActivityClick"
    />
    
    <!-- 限时秒杀 -->
    <FlashSale 
      :flashSaleList="flashSaleList"
      :endTime="flashSaleEndTime"
      @item-click="handleFlashSaleClick"
      @timeout="handleFlashSaleTimeout"
    />
    
    <!-- 优美排行 -->
    <BeautyRanking 
      @doctor-ranking-click="handleDoctorRankingClick"
      @hospital-ranking-click="handleHospitalRankingClick"
    />
    
    <!-- 精选/日记/医院/医生分类 -->
    <TabContent 
      ref="tabContent"
      :contentData="tabContentData"
      @item-click="handleTabContentClick"
      @tab-change="handleTabChange"
    />
  </view>
</template>

<script>
import HeaderBar from '@/components/HeaderBar.vue'	
import CategorySwiper from '@/components/CategorySwiper.vue'
import ActivitySwiper from '@/components/ActivitySwiper.vue'
import FlashSale from '@/components/FlashSale.vue'
import BeautyRanking from '@/components/BeautyRanking.vue'
import TabContent from '@/components/TabContent.vue'

export default {
  components: {
    HeaderBar,
    CategorySwiper,
    ActivitySwiper,
    FlashSale,
    BeautyRanking,
    TabContent
  },
  data() {
    return {
      currentLocation: '武汉',
      cartCount: 3,
      bannerList: [
        { id: 1, title: '夏季美肤特惠', image: '/static/banner1.jpg' },
        { id: 2, title: '玻尿酸填充', image: '/static/banner2.jpg' },
        { id: 3, title: '光子嫩肤套餐', image: '/static/banner3.jpg' }
      ],
      categoryList: [
        { id: 1, name: '玻尿酸', icon: '/static/hyaluronic_acid.jpg' },
        { id: 2, name: '鼻部', icon: '/static/nose.jpg' },
        { id: 3, name: '眼部', icon: '/static/eyes.jpg' },
        { id: 4, name: '美肤', icon: '/static/skin_care.jpg' },
        { id: 5, name: '美体塑形', icon: '/static/body_shaping.jpg' }
      ],
      activityList: [],
      flashSaleList: [],
      flashSaleEndTime: '2025-06-30 23:59:59',
      tabContentData: {
        0: [], // 精选
        1: [], // 日记
        2: [], // 医院
        3: []  // 医生
      }
    }
  },
  onLoad() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      try {
        // 显示加载提示
        uni.showLoading({
          title: '加载中...',
          mask: true
        })
        
        // 并行请求数据
        const [categoryRes, activityRes, flashSaleRes, doctorRes, hospitalRes, tabContentRes] = await Promise.all([
          this.$api.getCategoryList(),
          this.$api.getActivityList(),
          this.$api.getFlashSaleList(),
          this.$api.getDoctorRanking(),
          this.$api.getHospitalRanking(),
          this.$api.getTabContentData()
        ])
        
        // 更新数据
        if (categoryRes.code === 200) {
          this.categoryList = categoryRes.data
        }
        
        if (activityRes.code === 200) {
          this.activityList = activityRes.data
        }
        
        if (flashSaleRes.code === 200) {
          this.flashSaleList = flashSaleRes.data
        }
        
        if (doctorRes.code === 200) {
          // 为优美排行准备医生数据
          this.doctorRankingData = doctorRes.data
          // 为分类内容准备医生数据
          this.tabContentData[3] = doctorRes.data.slice(0, 2).map(doctor => ({
            id: doctor.id,
            title: doctor.name,
            desc: doctor.title,
            image: doctor.image
          }))
        }
        
        if (hospitalRes.code === 200) {
          // 为优美排行准备医院数据
          this.hospitalRankingData = hospitalRes.data
          // 为分类内容准备医院数据
          this.tabContentData[2] = hospitalRes.data.slice(0, 2).map(hospital => ({
            id: hospital.id,
            title: hospital.name,
            desc: hospital.address,
            image: hospital.image
          }))
        }
        
        if (tabContentRes.code === 200) {
          this.tabContentData[0] = tabContentRes.data.selected
          this.tabContentData[1] = tabContentRes.data.diary
        }
      } catch (error) {
        console.error('数据加载失败:', error)
        uni.showToast({
          title: '数据加载失败，请稍后重试',
          icon: 'none'
        })
      } finally {
        // 隐藏加载提示
        uni.hideLoading()
      }
    },
    
    // 事件处理函数
    handleLocationClick() {
      console.log('定位点击，跳转到城市选择页')
      uni.navigateTo({
        url: '/pages/citySelect/citySelect'
      })
    },
    
    handleSearch(keyword) {
      console.log('搜索:', keyword)
      uni.navigateTo({
        url: `/pages/searchResult/searchResult?keyword=${keyword}`
      })
    },
    
    handleCartClick() {
      console.log('跳转到购物车')
      uni.navigateTo({
        url: '/pages/cart/cart'
      })
    },
    
    handleCategoryClick(id) {
      console.log('分类点击:', id)
      uni.navigateTo({
        url: `/pages/category/category?id=${id}`
      })
    },
    
    handleActivityClick(id) {
      console.log('活动项点击:', id)
      uni.navigateTo({
        url: `/pages/activityDetail/activityDetail?id=${id}`
      })
    },
    
    handleFlashSaleClick(id) {
      console.log('限时秒杀点击:', id)
      uni.navigateTo({
        url: `/pages/flashSaleDetail/flashSaleDetail?id=${id}`
      })
    },
    
    handleFlashSaleTimeout() {
      console.log('限时秒杀结束，刷新数据')
      this.fetchData()
    },
    
    handleDoctorRankingClick() {
      console.log('医生榜点击')
      uni.navigateTo({
        url: '/pages/doctorRanking/doctorRanking'
      })
    },
    
    handleHospitalRankingClick() {
      console.log('机构榜点击')
      uni.navigateTo({
        url: '/pages/hospitalRanking/hospitalRanking'
      })
    },
    
    handleTabContentClick(id) {
      console.log('分类内容点击:', id)
      // 根据当前tab决定跳转到哪个详情页
      const currentTab = this.$refs.tabContent.currentTab
      let url = ''
      
      switch(currentTab) {
        case 0: // 精选
          url = `/pages/selectedDetail/selectedDetail?id=${id}`
          break
        case 1: // 日记
          url = `/pages/diaryDetail/diaryDetail?id=${id}`
          break
        case 2: // 医院
          url = `/pages/hospitalDetail/hospitalDetail?id=${id}`
          break
        case 3: // 医生
          url = `/pages/doctorDetail/doctorDetail?id=${id}`
          break
      }
      
      if (url) {
        uni.navigateTo({ url })
      }
    },
    
    handleTabChange(index) {
      console.log('切换到标签:', index)
      // 可以添加标签切换时的逻辑
    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  min-height: 100vh;
  background-color: #F8F8F8;
}

.status-bar {
  height: var(--status-bar-height);
  background-color: #FFF;
}

.reserved-image {
  width: 100%;
  height: 200px; /* 可根据实际情况调整高度 */
  margin-top: 10px;
}

.reserved-image image {
  width: 100%;
  height: 100%;
}
</style>